﻿<!DOCTYPE html>
<html>
<head>
    <title>Example 2</title>
    <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../js/knockout-2.1.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>

    <h1>Attendees</h1>
    <p>Use this page to keep track of all attendeees. </p>
    <div>
        <ul data-bind="foreach: people">
            <li>
                <a href="#" data-bind="click: $parent.removePerson">
                    <img src="../images/metro.icons/white/delete.png" width="32" style="padding-top: 5px;" /></a>
                <span data-bind="text: name"></span>
            </li>
        </ul>
    </div>

    <div class="buttonholder">
        <button data-bind="click: addPerson">
            <img src="../images/metro.icons/white/add.png" /></button>
        <img src="../images/metro.icons/white/heart.png" onclick="document.location.href='/'" />
    </div>

    <script type="text/javascript">
        function AppViewModel() {
            var self = this;

            self.people = ko.observableArray([
                { name: 'Bert' },
                { name: 'Charles' },
                { name: 'Denise' }
            ]);

            self.addPerson = function () {
                self.people.push({ name: "New at " + new Date() });
            };

            self.removePerson = function () {
                self.people.remove(this);
            }
        }

        ko.applyBindings(new AppViewModel());
    </script>

</body>
</html>
